<template>
<div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
    @click="pageCommodityList"></el-button>
    <el-button style="margin:10px" @click="allPassPassDynamic">一键审核</el-button>
    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
        <el-button slot="append" icon="el-icon-search" @click="pageCommodityList"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button>
    <!-- 表格
    data 展示数据 —— 数组类型
    -->
    <el-table ref="multipleTable" style="width: 100%;" border :data="list"  >
        <el-table-column prop="id" label="id" align="center">
      </el-table-column>
       
      <!-- <el-table-column prop="shopId" label="店铺id" width="80" align="center">
      </el-table-column> -->
      <el-table-column label="事件介绍" align="center" width="100"
        :filters="[{ text: '用户投诉', value: '2' },{ text: '商家投诉', value: '1' }]"
        :filter-method="filterTag1" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.type === 2">用户投诉</p>
          <p v-else-if="row.type == 1">商家投诉</p>

        </template>
      </el-table-column>
      
      <el-table-column prop="shopName" label="店铺名称" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="用户名称" align="center"></el-table-column>
 
      <el-table-column prop="complaintsDescription" label="投诉说明" align="center">
      </el-table-column>
      <el-table-column label="相关凭证" align="center">
        <template  slot-scope="{ row, $index }">
          <el-image  v-for="item in row.voucher" :key="item.id" 
            style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + item"  
            @click="clickevaluatePicture(item)" :preview-src-list="evaluatePictureList">
          </el-image>

        </template>
      </el-table-column>
      <el-table-column prop="complaintsReason" label="投诉原因" align="center">
      </el-table-column>
    <!-- <el-table-column prop="userId" label="用户id" align="center">
    </el-table-column> -->
    <el-table-column prop="orderDetailId" label="相关订单" align="center">
    </el-table-column>
    

      <el-table-column prop="createTime" label="投诉时间" align="center" width="100">
      </el-table-column>
      <el-table-column label="审核结果" align="center" width="100"
        :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status === -1">审核驳回</p>
          <p v-else-if="row.status === 0">未审核</p>
          <p v-else-if="row.status == 1">审核通过</p>

        </template>
      </el-table-column>
      <el-table-column label="处理结果" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.penaltyName">{{ row.penaltyName}}</p>
          <p v-else-if="row.status == -1">{{ row.result }}</p>
        </template>
      </el-table-column>
      <!--     <el-table-column label="下架原因" align="center">
        <template slot-scope="{ row, $index }">
          {{ row.auditResult }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="200" align="center">

        <template slot-scope="{ row, $index }">
          <template v-if="row.status == 0">
            <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
            
              <el-tooltip content="通过投诉" placement="top" slot="reference">
                <el-button type="success" @click="godd(row)" icon="el-icon-check"></el-button>
              </el-tooltip>
 
            <el-popconfirm style="margin-left:10px" title="是否驳回该商品？" icon="el-icon-info" icon-color="red"
              >
              <el-tooltip content="驳回投诉" placement="top" slot="reference">
                <el-button type="danger" @click="getRejectDynamic(row)" icon="el-icon-close"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
          <!-- <template v-if="row.status == 1">
            <el-popconfirm style="margin-left:10px" title="是否下架该商品？" icon="el-icon-info" icon-color="red"
              @confirm="offShelfDynamic(row)">
              <el-tooltip content="下架商品" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-delete"></el-button>
              </el-tooltip>
            </el-popconfirm>

          </template> -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
   >
  <el-form>
    <el-form-item label="惩罚配置选项">
    <el-select v-model="value" placeholder="请选择活动区域">
      <el-option :label="item.name" v-for="item in option" :value="item.id" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="getPassDynamic()">确 定</el-button>
  </span>
</el-dialog>

    <!-- 分页 -->
    <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
    name: 'ProductComplaints',
    mounted() {
    //获取列表数据方法
    this.pageCommodityList()
  },
  data() {
  
    return {
        dialogVisible: false,
        
      options:[],
      dialogVisible:false,
      // 商品状态
      status: '',
        setitem:'',
      // 一键审核
      multipleSelection: [],
      option:[],
      toExamine: [],
      auditResult: '',
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: [],
      ids: [],
      // ids:[],
      //搜索
      searchText: '',
      evaluatePictureList: [],
      value:'',
      imgArr:''
    }
  },
  methods: {
    async getPenaltyConfigurationList(){
      let res = await this.$API.report.getPenaltyConfigurationList()
      if(res.code==200){
        console.log(res, 'sh');
         this.option=res.data
      }
        // res.data.forEach(element => {
        //   this.option.push({name:element.name,id:element.id})
        // });
    //   }
    },
     godd(row){
         
        this.getPenaltyConfigurationList()
        this.dialogVisible=true;
        this.setitem=row
     },
    SelectionChange(toExamine) {
      console.log(toExamine, '>>>>>>><<<<<<<');
      this.toExamine = toExamine
    },
    // 点击评价图片，大图预览多张图片
    clickevaluatePicture(item) {
      var srclist = []
     
        // 把数据库传来的图片放进数组里
        srclist.push('https://www.yushiai.com.cn/' + item)
      this.evaluatePictureList = srclist // 赋值
    },
    // 一键审核
    async allPassPassDynamic() {
      let list = []
      this.toExamine.forEach(element => {
        if (element.status == 0) {
          list.push(element.id)
        }
      })

      list = list.join(',')
      let res = await this.$API.goods.allPassCommodity({
        ids: list
      })
      console.log(res, 'sh');
      this.pageCommodityList()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.ids = val.filter(function (item) {
        return item.auditStatus == 0
      }).map((item, index) => {
        return item.id;
      }).join(",");
      console.log(this.ids)
    },
    // 分页列表
    async pageCommodityList() {
      let res = await this.$API.shop.getAllUserShopComplaintsListByTimeDesc({
        pageNum: this.pageNumber,
        pageSize: this.pageSize,
        searchText: this.searchText
      })
      this.toExamine = res
      this.total = res.data.sumLine;
      res.data.rows.forEach(element=>{
        
        element.voucher=element.voucher.split(',')
        console.log(element,'---');

      })
       this.list = res.data.rows;
     
    },
    reSetting() {
      this.searchText = '';
      this.pageCommodityList();
    },
    async getPassDynamic(id) {
        console.log(this.setitem.id,'sett');
      let res = await this.$API.shop.passComplaints({
        penaltyConfigurationId: this.value,
        result: '审核通过',
        shopComplaintsId:this.setitem.id
      })
      console.log(res,'通过接口');
      this.dialogVisible = false
      this.pageCommodityList()
    },
    async getRejectDynamic(row) {
      // console.log(row, 'row');
      let auditResult = prompt('驳回原因：');
      if (auditResult != null && auditResult != "") {
        let res = await this.$API.shop.rejectComplaints({
            shopComplaintsId: row.id,
          result: auditResult
        })
        this.pageCommodityList()
        // console.log(auditResult, '驳回');
        return row.reason = auditResult
      }
    },
    async offShelfDynamic(row) {
      let reason = prompt('下架原因：');
      if (reason != null && reason != "") {
        console.log(this.$API.goods, 'api');
        let res = await this.$API.goods.adminCommodityDown({
          commodityIds: String(row.id),
          reason,
        })
        console.log(res, '下架了');
        this.pageCommodityList()
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.pageCommodityList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      this.pageCommodityList()
    },
    filterTag(value, row) {
      console.log(value, row, '这是')
      return row.status == Number(value);
    },
    filterTag1(value, row) {
      console.log(value, row, '这是')
      return row.type == Number(value);
    },
    filterHandler(value, row, column) {
      // const property = column['property'];
      // return row[property] === value;
    }
  }
}
</script>

<style>
 
</style>